import React ,{Component,Fragment}from 'react'
//antd
import { Form, Input, Button,Row,Col } from 'antd';
import { UserOutlined ,PictureOutlined ,LockOutlined } from '@ant-design/icons';
//css
import "../index.scss"
class RegisterForm extends Component{
    constructor(){
        super();
        this.state = {};

    }

    render(){
        const onFinish = values => {
            console.log('Received values of form: ', values);
        }
        const toggleForm =() =>{
            this.props.changeView("login");
        }
        return (
            <Fragment>
                <div className="form-header">
                    <h4 className="column">注册</h4>
                    <span onClick={toggleForm}>账号登录</span>
                </div>
                <div className="form-content">
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: 'Please input your Username!' }]}
                        >
                            <Input prefix={<UserOutlined />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="Password"
                            rules={[{ required: true, message: 'Please input your Password!' }]}
                        >
                            <Input.Password prefix={<LockOutlined/>} placeholder="Password" />
                        </Form.Item>
                        <Form.Item
                            name="Password2"
                            rules={[{ required: true, message: 'Please input your Password!' },
                                ({ getFieldValue }) => ({  //ES6 解构
                                    validator(_, value) {
                                        if (!value || getFieldValue('Password') === value) {
                                            return Promise.resolve();
                                        }

                                        return Promise.reject(new Error('The two passwords that you entered do not match!'));
                                    },
                                }),]}
                        >
                            <Input.Password prefix={<LockOutlined/>} placeholder="Password" />
                        </Form.Item>
                        <Form.Item
                            name="Code"
                            rules={[{ required: true, message: 'Please input your Password!' }]}
                        >
                            <Row gutter={13}>
                                <Col className="gutter-row" span={15}>
                                    <Input prefix={<PictureOutlined />} placeholder="Code" />
                                </Col>
                                <Col className="gutter-row" span={9}>
                                    <Button type="primary" danger block>
                                        获取验证码
                                    </Button>
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button" block>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>

            </Fragment>




        )
    }
}

export default RegisterForm
